<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品数据分析</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript" src="{{url_for('static',filename ='js/jquery-3.4.1.min.js')}}"></script>
    <script src="{{url_for('static',filename ='lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{url_for('static',filename ='js/xadmin.js')}}"></script>
</head>
<body>
<div id="21bae92e048e4a8a812f5bd075d40d37" class="chart-container" style="width:900px; height:500px; "></div>
<script>
    var data1;
    var data2;
    var data3;
    $.ajax({
        url: 'select_example',
        type: 'GET', // 或者 'POST' 等其他HTTP方法
        dataType: 'json', // 期望从服务器返回的数据类型，例如 json, xml, text 等
        success: function (res) {
            // 请求成功，处理返回的数据
            console.log(res);
            $.each(res, function (index, test) {
                data1 = test.a;
                data2 = test.b;
                data3 = test.c;
            });
            var chart_21bae92e048e4a8a812f5bd075d40d37 = echarts.init(
                document.getElementById('21bae92e048e4a8a812f5bd075d40d37'), 'white', {renderer: 'canvas'});
            var option_21bae92e048e4a8a812f5bd075d40d37 = {
                "animation": true,
                "animationThreshold": 2000,
                "animationDuration": 1000,
                "animationEasing": "cubicOut",
                "animationDelay": 0,
                "animationDurationUpdate": 300,
                "animationEasingUpdate": "cubicOut",
                "animationDelayUpdate": 0,
                "aria": {
                    "enabled": false
                },
                "color": [
                    "#5470c6",
                    "#91cc75",
                    "#fac858",
                    "#ee6666",
                    "#73c0de",
                    "#3ba272",
                    "#fc8452",
                    "#9a60b4",
                    "#ea7ccc"
                ],
                "series": [
                    {
                        "type": "bar",
                        "name": "Series 1",
                        "legendHoverLink": true,
                        "data": [
                            data1,
                            data2,
                            data3
                        ],
                        "realtimeSort": false,
                        "showBackground": false,
                        "stackStrategy": "samesign",
                        "cursor": "pointer",
                        "barMinHeight": 0,
                        "barCategoryGap": "20%",
                        "barGap": "30%",
                        "large": false,
                        "largeThreshold": 400,
                        "seriesLayoutBy": "column",
                        "datasetIndex": 0,
                        "clip": true,
                        "zlevel": 0,
                        "z": 2,
                        "label": {
                            "show": true,
                            "margin": 8
                        }
                    }
                ],
                "legend": [
                    {
                        "data": [
                            "Series 1"
                        ],
                        "selected": {}
                    }
                ],
                "tooltip": {
                    "show": true,
                    "trigger": "item",
                    "triggerOn": "mousemove|click",
                    "axisPointer": {
                        "type": "line"
                    },
                    "showContent": true,
                    "alwaysShowContent": false,
                    "showDelay": 0,
                    "hideDelay": 100,
                    "enterable": false,
                    "confine": false,
                    "appendToBody": false,
                    "transitionDuration": 0.4,
                    "textStyle": {
                        "fontSize": 14
                    },
                    "borderWidth": 0,
                    "padding": 5,
                    "order": "seriesAsc"
                },
                "xAxis": [
                    {
                        "show": true,
                        "scale": false,
                        "nameLocation": "end",
                        "nameGap": 15,
                        "gridIndex": 0,
                        "inverse": false,
                        "offset": 0,
                        "splitNumber": 5,
                        "minInterval": 0,
                        "splitLine": {
                            "show": true,
                            "lineStyle": {
                                "show": true,
                                "width": 1,
                                "opacity": 1,
                                "curveness": 0,
                                "type": "solid"
                            }
                        },
                        "data": [
                            "Category A",
                            "Category B",
                            "Category C"
                        ]
                    }
                ],
                "yAxis": [
                    {
                        "show": true,
                        "scale": false,
                        "nameLocation": "end",
                        "nameGap": 15,
                        "gridIndex": 0,
                        "inverse": false,
                        "offset": 0,
                        "splitNumber": 5,
                        "minInterval": 0,
                        "splitLine": {
                            "show": true,
                            "lineStyle": {
                                "show": true,
                                "width": 1,
                                "opacity": 1,
                                "curveness": 0,
                                "type": "solid"
                            }
                        }
                    }
                ]
            };
            chart_21bae92e048e4a8a812f5bd075d40d37.setOption(option_21bae92e048e4a8a812f5bd075d40d37);
        },
        error: function (xhr, status, error) {
            // 请求失败，处理错误情况
            console.error("An error occurred:", error);
        }

    });

</script>
</body>
</html>
